import { Component, OnInit } from '@angular/core';
import {Path} from "../../../../portal/admin/admin-breadcrumb/breadcrumb";
import {PageSubject} from "../../../../util/page-subject";
import {OneDialogService} from "../../../../widgets/one-dialog/one-dialog.service";
import {ResponseUtil} from "../../../../util/response-util";
import {MsgResult} from "../../../../models/msg-result";
import {MsgConstants} from "../../../../constants/constants";
import {MonitorDataService} from "./monitor-data.service";
import {TableUtil} from "../../../../util/table-util";


declare var $;
declare var moment;


@Component({
  selector: 'app-monitor-data',
  templateUrl: './monitor-data.component.html',
  styleUrls: ['./monitor-data.component.css']
})
export class MonitorDataComponent implements OnInit {
  dataObj;config;titleName;checkCodeType;table;
  constructor(
    private pageSubject : PageSubject,
    private MonitorDataService : MonitorDataService,
    private responseUtil :ResponseUtil,
    private tableUtil:TableUtil,
    private dialogService: OneDialogService,
  ) { }

  ngOnInit() {
    $(".one-data-loadState").show();
    this.pushPage();
    this.initStyle();
    this.initTable();
    this.dataObj = {"queryCheckCode":0,"startTime":$.trim($("#airQualityDate").val().split("至")[0]),"endTime":$.trim($("#airQualityDate").val().split("至")[1]),"tableName":$("#search-table").val()}
    this.tableContentData(this.dataObj);
    this.export();
  }

  //面包屑导航
  pushPage() {
    let path = new Path("原始数据查询", "");
    this.pageSubject.pushPage("数据表格", "", path);
  }



  initStyle(){
    this.checkCodeType = "siteCodeType";
    this.titleName = "站点";
    // 切换查询的T_DATA_REGION_AIR_数据表
    $("#regionTable").click(function (e) {
      this.titleName = "区域";
      this.checkCodeType = "regionCodeType"
      $(e.target).addClass("active").siblings(".active").removeClass("active");
      var html = "";
      html += "<option value='T_DATA_REGION_AIR_DAY-2017'>T_DATA_REGION_AIR_DAY-2017</option>";
      html += "<option value='T_DATA_REGION_AIR_HOUR'>T_DATA_REGION_AIR_HOUR</option>";
      html += "<option value='T_DATA_REGION_AIR_HOUR-2017'>T_DATA_REGION_AIR_HOUR-2017</option>";
      html += "<option value='T_DATA_REGION_AIR_MONTH-2017'>T_DATA_REGION_AIR_MONTH-2017</option>";
      html += "<option value='T_DATA_REGION_AIR_WEEK-2017'>T_DATA_REGION_AIR_WEEK-2017</option>";
      html += "<option value='T_DATA_REGION_AIR_YEAR-2017'>T_DATA_REGION_AIR_YEAR-2017</option>";
      $("#search-table").html(html);
      this.export();
    }.bind(this));

    // 切换查询的T_DATA_AIR_数据表
    $("#siteTable").click(function (e) {
      this.titleName = "站点";
      this.checkCodeType = "siteCodeType"
      $(e.target).addClass("active").siblings(".active").removeClass("active");
      this.export();
      var html = "";
      html += "<option value='T_DATA_AIR_DAY-2017'>T_DATA_AIR_DAY-2017</option>";
      html += "<option value='T_DATA_AIR_HOUR'>T_DATA_AIR_HOUR</option>";
      html += "<option value='T_DATA_AIR_HOUR-2017'>T_DATA_AIR_HOUR-2017</option>";
      html += "<option value='T_DATA_AIR_MIN'>T_DATA_AIR_MIN</option>";
      html += "<option value='T_DATA_AIR_MIN-2017'>T_DATA_AIR_MIN-2017</option>";
      html += "<option value='T_DATA_AIR_MONTH-2017'>T_DATA_AIR_MONTH-2017</option>";
      html += "<option value='T_DATA_AIR_WEEK-2017'>T_DATA_AIR_WEEK-2017</option>";
      html += "<option value='T_DATA_AIR_YEAR-2017'>T_DATA_AIR_YEAR-2017</option>";
      $("#search-table").html(html);
    }.bind(this));

    // 切换查询的T_DATA_SC_COLLECT_MIN5数据表
    $("#minTable").click(function (e) {
      this.checkCodeType = "monitorType";
      $(e.target).addClass("active").siblings(".active").removeClass("active");
      var html = "<option value='T_DATA_SC_COLLECT_MIN5'>T_DATA_SC_COLLECT_MIN5</option>";
      $("#search-table").html(html);
      this.export();
    }.bind(this));
    $(".search").click(function () {
      $(".one-data-loadState").show();
      this.dateChange();
    }.bind(this))
  }
  //表格数据
  tableContentData(obj){
    let dataId = $(".timeBtn").find(".active").attr("id");
    if(dataId =="siteTable"){
      this.MonitorDataService.getHideAirQualitySiteData(obj).subscribe(
        result => this.responseUtil.success(result,this.tableContentDataResult),
        message => this.responseUtil.error(message)
      );
    }else if(dataId =="regionTable"){
      this.MonitorDataService.getHideAirQualityAreaData(obj).subscribe(
        result => this.responseUtil.success(result,this.tableContentDataResult),
        message => this.responseUtil.error(message)
      );
    }else if(dataId =="minTable"){
      this.MonitorDataService.getHideAirQualityMinData(obj).subscribe(
        result => this.responseUtil.success(result,this.tableContentDataResult),
        message => this.responseUtil.error(message)
      );
    }
  }
  private tableContentDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.tableContentDataTree(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  private tableContentDataTree(data){
    $(".one-data-loadState").hide();
    if(data == null){
      let data = [];
      this.tableContent(data);
    }else{
      console.log("表格数据加载成功");
      console.log(data);
      this.tableContent(data);
      $(".one-data-loadState").hide();
    }
  }

//表格
  tableContent(datas) {
    let dataId = $(".timeBtn").find(".active").attr("id");
    $(".one-table-area").html('<table class="table table-striped user_monitor_data_table" id="airQualityDataTable" style="width: 1156px;"></table>');
    if(dataId =="minTable"){
      this.table=this.tableUtil.load("airQualityDataTable",{
        columns: [
          [{
            field: 'index',
            title: '序号',
            align: "center",
            halign: "center",
            valign: "middle",
            rowspan: 2,
            width: 50
          }, {
            field: 'snCode',
            title: '设备编码',
            align: "left",
            halign: "center",
            valign: "middle",
            rowspan: 2,
            width: 50
          }, /*{
           field: 'monitorCode',
           title: '设备类型代码',
           align: "center",
           halign: "center",
           valign: "middle",
           rowspan: 2,
           width: 40
           },*/ {
            field: 'monitorTime',
            title: '监测时间',
            width: 75,
            align: "left",
            valign: "middle",
            rowspan: 2,
            halign: "center"
          }, {
            field: '',
            title: '监测数据',
            align: "right",
            colspan: 20,
            halign: "center"
          }], [
            {
              field: 'pm25',
              title: 'PM25',
              align: "center",
              halign: "center"
            }, {
              field: 'ctpm25',
              title: 'CTPM25',
              align: "center",
              halign: "center"
            }, {
              field: 'pm10',
              title: 'PM10',
              align: "center",
              halign: "center"
            }, {
              field: 'ctpm10',
              title: 'CTPM10',
              align: "center",
              halign: "center"
            }, {
              field: 'co',
              title: 'CO',
              align: "center",
              halign: "center"
            }, {
              field: 'ctco',
              title: 'CTCO',
              align: "center",
              halign: "center"
            }, {
              field: 'adco',
              title: 'ADCO',
              align: "center",
              halign: "center"
            }, {
              field: 'no2',
              title: 'NO<sub>2</sub>',
              align: "center",
              halign: "center"
            }, {
              field: 'ctno2',
              title: 'CTNO<sub>2</sub>',
              align: "center",
              halign: "center"
            }, {
              field: 'adno2',
              title: 'ADNO<sub>2</sub>',
              align: "center",
              halign: "center"
            }, {
              field: 'so2',
              title: 'SO<sub>2</sub>',
              align: "center",
              halign: "center"
            }, {
              field: 'ctso2',
              title: 'CTSO<sub>2</sub>',
              align: "center",
              halign: "center"
            }, {
              field: 'adso2',
              title: 'ADSO<sub>2</sub>',
              align: "center",
              halign: "center"
            }, {
              field: 'o3',
              title: 'O<sub>3</sub>',
              align: "center",
              halign: "center"
            }, {
              field: 'cto3',
              title: 'CTO<sub>3</sub>',
              align: "center",
              halign: "center"
            }, {
              field: 'ado3',
              title: 'ADO<sub>3</sub>',
              align: "center",
              halign: "center"
            }, {
              field: 'hum',
              title: '湿度',
              align: "center",
              halign: "center"
            }, {
              field: 'temp',
              title: '温度',
              align: "center",
              halign: "center"
            }, {
              field: 'wd',
              title: '风向',
              align: "center",
              halign: "center"
            }, {
              field: 'ws',
              title: '风速',
              align: "center",
              halign: "center"
            },
          ]
        ],
        data: datas,
        pagination: true,
        paginationLoop: false,
        striped: true,
        paginationPreText: "上一页",
        paginationNextText: "下一页",
        undefinedText: " ",
        height: $(window.innerHeight)[0] - 200,
        pageSize: 15,
        pageList: [10, 15, 20]
      });
    }else {
      this.table=this.tableUtil.load("airQualityDataTable",{
        columns: [
          [{
            field: 'index',
            title: '序号',
            align: "center",
            halign: "center",
            valign: "middle",
            rowspan: 2,
            width: 50
          }, {
            field: 'code',
            title: this.titleName + '编码',
            align: "left",
            halign: "center",
            valign: "middle",
            rowspan: 2,
            width: 100
          }, {
            field: 'name',
            title: this.titleName + '名称',
            align: "center",
            halign: "center",
            valign: "middle",
            rowspan: 2,
            width: 85
          }, {
            field: 'monitorTime',
            title: '监测时间',
            width: 160,
            align: "left",
            valign: "middle",
            rowspan: 2,
            halign: "center"
          }, {
            field: 'compositeValue',
            title: '综合指数',
            width: 100,
            align: "center",
            valign: "middle",
            rowspan: 2,
            halign: "center"
          }, {
            field: 'aqi',
            title: 'AQI',
            width: 60,
            align: "center",
            valign: "middle",
            rowspan: 2,
            halign: "center"
          }, {
            field: 'aqiLevelType',
            title: '等级',
            width: 60,
            align: "center",
            valign: "middle",
            rowspan: 2,
            halign: "center"
          }, {
            field: 'pollutant',
            title: '首要污染物',
            width: 150,
            align: "center",
            valign: "middle",
            rowspan: 2,
            halign: "center"
          }, {
            field: '',
            title: 'PM10',
            width: 150,
            align: "right",
            colspan: 3,
            halign: "center"
          }, {
            field: '',
            title: 'PM25',
            width: 150,
            align: "right",
            colspan: 3,
            halign: "center"
          }, {
            field: '',
            title: 'SO<sub>2</sub>',
            width: 150,
            align: "right",
            colspan: 3,
            halign: "center"
          }, {
            field: '',
            title: 'NO<sub>2</sub>',
            width: 150,
            align: "right",
            colspan: 3,
            halign: "center"
          }, {
            field: '',
            title: 'CO',
            width: 150,
            align: "right",
            colspan: 3,
            halign: "center"
          }, {
            field: '',
            title: 'O<sub>3</sub>',
            width: 150,
            align: "right",
            colspan: 3,
            halign: "center"
          }, {
            field: 'o3_8_concentration',
            title: 'o3_8',
            width: 80,
            align: "center",
            valign: "middle",
            rowspan: 2,
            halign: "center"
          }, {
            field: 'pm10_24_concentration',
            title: 'pm10_24',
            width: 100,
            align: "center",
            valign: "middle",
            rowspan: 2,
            halign: "center"
          }, {
            field: 'pm25_24_concentration',
            title: 'pm25_24',
            width: 100,
            align: "center",
            valign: "middle",
            rowspan: 2,
            halign: "center"
          }], [
            {
              field: 'pm10_concentration',
              title: '浓度',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'pm10_iaqi',
              title: 'iaqi',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'pm10_subIndex',
              title: '指数',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'pm25_concentration',
              title: '浓度',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'pm25_iaqi',
              title: 'iaqi',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'pm25_subIndex',
              title: '指数',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'so2_concentration',
              title: '浓度',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'so2_iaqi',
              title: 'iaqi',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'so2_subIndex',
              title: '指数',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'no2_concentration',
              title: '浓度',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'no2_iaqi',
              title: 'iaqi',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'no2_subIndex',
              title: '指数',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'co_concentration',
              title: '浓度',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'co_iaqi',
              title: 'iaqi',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'co_subIndex',
              title: '指数',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'o3_concentration',
              title: '浓度',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'o3_iaqi',
              title: 'iaqi',
              width:50,
              align: "center",
              halign: "center"
            }, {
              field: 'o3_subIndex',
              title: '指数',
              width:50,
              align: "center",
              halign: "center"
            }
          ]
        ],
        data: datas,
        pagination: true,
        paginationLoop: false,
        striped: true,
        paginationPreText: "上一页",
        paginationNextText: "下一页",
        undefinedText: " ",
        height: $(window.innerHeight)[0] - 200,
        pageSize: 15,
        pageList: [10, 15, 20]
      });
    }
  }
//添加导出按钮
  export(){
    $(".export").click(function(){
      let queryCheckCode = $("#search-codes").val();
      let tableName = $("#search-table").val();
      let startTime = $.trim($("#airQualityDate").val().split("至")[0]);
      let endTime = $.trim($("#airQualityDate").val().split("至")[1]);//+"&checkCodeType="+this.checkCodeType
      var objString = "endTime="+endTime+"&startTime="+startTime+"&queryCheckCode="+queryCheckCode+"&tableName="+tableName+"&checkCodeType="+this.checkCodeType;
      let baseUrl = location.protocol + "//" + location.host + "/";
      console.log(baseUrl+"api/noAuthen/airQualityDataReportExportExcel?format=json&"+objString);
      let changeUrl = "";
      if(this.checkCodeType =="monitorType"){
        changeUrl = "api/noAuthen/airMointorDataReportExportExcel?format=json&";
      }else{
        changeUrl = "api/noAuthen/airQualityDataReportExportExcel?format=json&";
      }
      window.location.href = baseUrl+changeUrl+objString;
    }.bind(this))
  }

//配置信息
  initTable(){
    this.config = {
      timePicker: true,
      timePickerIncrement: 5,
      timePicker24Hour: true,
      locale: {
        format: "YYYY-MM-DD HH:mm:ss",
        separator: " 至 ",
        applyLabel: '确定',
        cancelLabel: '取消',
        fromLabel: '从',
        toLabel: '到',
        weekLabel: 'W',
        customRangeLabel: 'Custom Range',
        daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        firstDay: 1
      },
      format: 'YYYY-MM-DD HH:mm:ss',
      startDate: moment().subtract(1,"d").format("YYYY-MM-DD HH:mm:ss"),
      endDate: moment().format("YYYY-MM-DD HH:mm:ss"),
      maxDate: moment().format("YYYY-MM-DD HH:mm:ss")
    };
//初始化日期插件
    $("#airQualityDate").daterangepicker(this.config);

  }
  dateChange() {
    $(".one-table-area").html('<table class="table table-striped" id="airQualityDataTable"></table>');
    $(".one-data-loadState").show();
    this.dataObj.queryCheckCode = $("#search-codes").val();
    this.dataObj.tableName = $("#search-table").val();
    this.dataObj.startTime = $.trim($("#airQualityDate").val().split("至")[0]);
    this.dataObj.endTime = $.trim($("#airQualityDate").val().split("至")[1]);
    this.tableContentData(this.dataObj);
  }
 
}
